import React, { Component } from 'react';
import { HotVenueWrap } from './styledIndex'
import { get } from 'utils/http'
import { Carousel } from 'antd-mobile'
import Hhh from 'assets/images/hhh.png' 

class HotVenue extends Component {
    state = {
        list: []
    }

    async componentDidMount() {
        let result = await get({
            url: '/api/home/index/getHotTheatre?version=6.0.9&referer=2'
        })
        this.setState({
            list: result.data.theatre_list
        })
    }
    render() {
        return (
            <HotVenueWrap>
                <div className="head">
                    <header>热门场馆</header>
                    <span>></span>
                </div>
                <div className="nimade">
                {
                    
                    this.state.list.length &&(
                        this.state.list.map((value,index) => (
                            <Carousel
                                autoplay={false}
                                infinite
                                dots={false}
                                key={index}
                            >
                            <div
                                key={index} 
                                className="main"
                            >
                                <div className="first">
                                    <div><img src={value.pic} alt=""/></div>
                                    <div>
                                        <span>{value.name}</span>
                                        <p>{value.count}场演出</p>
                                    </div>
                                    <div><img src={Hhh} alt=""/></div>
                                </div>
                                <div className="sb">
                                {
                                    this.state.list[index].showList.map((item,index2) => (
                                        <div key={index2} className="second">
                                            <div>
                                                <p>
                                                    <span>{item.show_time}</span>
                                                    <span></span>
                                                </p>
                                                <img src={item.pic} alt=""/>
                                            </div>
                                        </div>
                                            
                                    ))
                                }
                                </div>
                            </div>
                            </Carousel>
                        ))
                    )
                }
                </div>
            </HotVenueWrap>
        );
    }
}

export default HotVenue;